<template>
    <div style="height: 100%;">
        <Title text="懋略设备状态监控看" />
        <div class="data">
            <div class="itemstate">
                <div class="dataitem run">运行:{{ datastate.run }}</div>
                <div class="dataitem wait">待料:{{ datastate.wait }}</div>
                <div class="dataitem maintain">维修:{{ datastate.maintain }}</div>
                <div class="dataitem stop">停机:{{ datastate.stop }}</div>
                <div class="dataitem offline">离线:{{ datastate.offline }}</div>
            </div>
            <div class="allChannel">
                <div class="channel" 
                v-for="item in line" 
                :key="item" 
                :class="nowline === item?'linelight':''"
                @click="changeline(item)">{{item}}线</div>
            </div>
        </div>
        <div class="main">
            <SingleData v-for="item in datalist[nowline]" :data="item" :key="item.id"/>
        </div>
    </div>
</template>

<script setup>
import Title from '../components/Title.vue'
import SingleData from '../components/SingleData.vue';
import { ref, onBeforeUnmount, onMounted } from 'vue';
import { conditionMonitoring } from '../assets/mock.js';

const datalist = ref({})
const line = ref(['a','b','c','d'])
const nowline = ref('a')
const datastate = ref({
    run:0,
    wait:0,
    maintain:0,
    stop:0,
    offline:0
})
const changeline = (item)=>{
    nowline.value = item
}
const getdatalist = (list)=>{
    list.forEach(element => {
        if(datalist.value[element.line]){
            datalist.value[element.line].push(element)
        }else{
            datalist.value[element.line] = []
        }
        datastate.value[element.state]++
    })
}

onMounted(()=>{
    getdatalist(conditionMonitoring)
})
</script>

<style scoped>
.offline{
    color: #717171;
}
.stop{
    color: #E85B15;
}
.maintain{
    color: #FAC858;
}
.wait{
    color: #ABCFAF;
}
.run{
    color: #49D400;
}
.main{
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    overflow: auto;
    height: calc(100% - 50px);
}
.main::-webkit-scrollbar{
    width: 10px;
}
.main::-webkit-scrollbar-thumb{
    background: rgba(0, 0, 0, 0);
}
.main:hover::-webkit-scrollbar-thumb{
    border-radius: 5px;
    background: rgb(144, 144, 144);
}
.linelight{
    color: #49D400;
}
.channel{
    height: 50px;
    line-height: 50px;
    margin-right: 20px;
}
.allChannel{
    display: flex;
}
.dataitem{
    margin-left: 20px;
}
.itemstate{
    height: 50px;
    line-height: 50px;
    display: flex;
}
.data{
    display: flex;
    height: 50px;
    width: 100%;
    justify-content: space-between;
}
*{
    color: white;
}
</style>